<template>
	<view class="content">
		<view class="date-box flex-justify-s">
			<view @click="changeDate(index)"
				:class="['date-item','flex-center-c',{'date-item-active':index==data.index}]"
				v-for="(item,index) in data.timeArr" :key="index">
				<text class="day-week">{{index==0?'今天':item.week}}</text>
				<text class="date">{{item.MD}}</text>
			</view>
		</view>
		<view class="list" v-for="(item,index) in data.list" :key="index">

			<view v-if="item.book.code==1" class="lis-item" @click="changeCollapse(item)">
				<view class="item-head">
					<text>{{item.name}}</text>
					<uv-icon name="arrow-down"></uv-icon>
				</view>
			</view>
			<view v-else class="lis-item" @click="call(item.customerPhone)">
				<view class="item-head">
					<text>{{item.name}}</text>
					<view class="flex-align-center">
						<text>特殊订场</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>

				</view>
			</view>
			<view v-show="item.isShowCollapse && item.book.code==1" class="cd-item flex-justify-s"
				v-for="(itm,idx) in data.sessionList" :key="idx" @click="selectCC(itm,idx)">
				<view class="suoding" v-show="itm.status.code!=1">已锁定</view>
				<img v-show="itm.isSelect" src="../../../static/img/img/xuanz-icon.png" class="xuanz-icon" alt="">
				<text class="time">{{itm.timeIntervalStart}}-{{itm.timeIntervalEnd}}</text>
				<view class="jiage flex-align-center">
					<text class="text">价格</text>
					<text class="jie">¥{{itm.price}}</text>
				</view>
			</view>
		</view>
		<view class="btn-b" v-if="data.seletcList.length">
			<view class="blue-btn" @click="predetermine">去预定</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		siteBookPageByType,
		sitePriceRecordOnDay,
	} from '../../../requestApi/api.js';
	const data = ref({
		timeArr: [], //时间
		weekDay: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
		index: 0,
		form: {
			enterpriseId: '',
			type: '',
			day: '',
		},
		isShowBtn: false, //是否显示按钮
		list: [], //场地列表
		sessionList: [], //场次列表
		ccIndex: 0, //场次下标
		show: false,
		seletcList: [], //选择场次
		// selectSite: {}, //选中的场地
	})
	onLoad((e) => {
		data.value.form.enterpriseId = e.entid;
		data.value.form.type = e.type;
		getDetails();
	});
	//特殊场拨打电话
	const call = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	};
	//去预定
	const predetermine = () => {
		// console.log(data.value.selectSite);
		let ids=JSON.stringify(data.value.seletcList);
		uni.navigateTo({
			url: `/pages/booking/payment/payment?ids=${ids}&type=1`
		})
		
		
	};
	//选场次
	const selectCC = (itm, idx) => {
		if (itm.status.code != 1) return;
		data.value.ccIndex = idx;
		data.value.sessionList[idx].isSelect = !data.value.sessionList[idx].isSelect;
		let item = data.value.sessionList[idx];
		if (item.isSelect) {
			data.value.seletcList.push(item.id)
		} else {
			
			data.value.seletcList.forEach((i, index, array) => {
				if (i == item.id) {
					array.splice(index, 1);
				}
			})
		}
	};
	//获取场次信息
	const getSessionList = (siteId) => {
		let day = data.value.timeArr[data.value.index].YMD;
		sitePriceRecordOnDay({
			day,
			siteId
		}).then(res => {

			let dataRes = res.data.map((item) => {
				item.isSelect = false;
				return item;
			})

			data.value.sessionList = dataRes;
			// console.log(data.value.sessionList)
		})
	};
	//获取信息
	const getDetails = async () => {
		await getDateTimeArr();
		data.value.form.day = data.value.timeArr[0].YMD;
		getSiteList();
	};

	//获取场地
	const getSiteList = () => {
		siteBookPageByType(data.value.form).then(res => {
			let dataRes = res.data.records.map((item) => {
				item.isShowCollapse = false;
				return item;
			})
			data.value.list = dataRes;
			console.log(data.value.list)

		})

	};
	//切换时间
	const changeDate = (index) => {
		data.value.index = index;
		data.value.form.day = data.value.timeArr[index].YMD;
		getSiteList();
	};
	//获取时间集合
	const getDateTimeArr = async () => {
		for (let i = 0; i < 5; i++) {
			let time = defaulTime(new Date(), i);
			data.value.timeArr.push(time);
		}
		return true;
	};

	//设置时间
	const defaulTime = (now, d) => {
		// now.setHours(0);
		// now.setMinutes(0);
		// now.setSeconds(0);
		now.setDate(now.getDate() + d);
		now = formatDate(now);;
		return now;
	}
	//格式化时间
	const formatDate = (date) => {
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		const week = data.value.weekDay[date.getDay()];
		const YMD = [year, month, day].map(formatNumber).join('-');
		const MD = [month, day].map(formatNumber).join('/');
		return {
			YMD,
			MD,
			week
		};
	};
	//补0
	const formatNumber = (n) => {
		n = n.toString()
		return n.padStart(2, 0);
	}

	//切换面板
	const changeCollapse = (item) => {
		data.value.isShowBtn = !data.value.isShowBtn;
		if (item.isShowCollapse) {
			data.value.list.map((itm) => item.isShowCollapse = false);
			data.value.seletcList = [];
			// data.value.selectSite = {};
		} else {
			data.value.sessionList = [];
			data.value.list.map((itm) => {
				if (item.id == itm.id) {
					itm.isShowCollapse = true;
					// data.value.selectSite = item;
				} else {
					itm.isShowCollapse = false;
					// data.value.selectSite = {};
				}
				return itm;
			})
		}
		if (!item.isShowCollapse) return;
		getSessionList(item.id);

	};
</script>

<style lang="scss">
	.content {
		padding: 18rpx 40rpx 0;

		.date-box {
			margin-bottom: 8rpx;

			.date-item {
				width: 116rpx;
				height: 104rpx;
				background: #F8F8F8;
				border-radius: 12rpx;

				.day-week {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
				}

				.date {
					font-size: 24rpx;
					color: #A5A5A5;
				}
			}

			.date-item-active {
				background: #3C66F6;

				.day-week,
				.date {
					color: #FFFFFF;
				}
			}
		}

		.list {

			padding: 0 20rpx;

			.lis-item {
				.item-head {
					height: 100rpx;
					border-bottom: 2rpx solid rgba(181, 186, 205, 0.2);
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0;

					text {
						font-size: 28rpx;
						font-weight: bold;
						color: #1D2228;
					}
				}
			}

			.cd-item {
				width: 100%;
				height: 170rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 0 30rpx 0 34rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				.suoding {
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					background-color: rgba(44, 44, 44, 0.25);
					text-align: center;
					line-height: 170rpx;
					font-size: 72rpx;
					color: #1D2228;
				}

				.xuanz-icon {
					width: 52rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
					top: 0;
				}

				.time {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
				}

				.jiage {
					width: 324rpx;
					height: 134rpx;
					background: #ffffff;
					border-radius: 0rpx 8rpx 8rpx 0rpx;
					font-size: 48rpx;
					font-weight: bold;
					color: #F26D61;
					padding-left: 50rpx;

					.text {
						font-size: 22rpx;
						color: #A5A5A5;
						display: inline-block;
						margin-right: 50rpx;
						font-weight: normal;
					}

					.jie {
						letter-spacing: -4rpx;
					}
				}
			}

		}


	}

	::v-deep .uv-collapse-item__content__text {
		padding: 20rpx 0 1rpx !important;
	}

	::v-deep .uv-line {
		border-color: rgba(181, 186, 205, .2) !important;
	}

	::v-deep .uv-collapse .uv-line:first-child {
		border: none !important;
	}

	::v-deep .uv-cell__body {
		padding: 32rpx 0 28rpx !important;
	}

	::v-deep .uv-cell__title-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #1D2228;
	}

	::v-deep .uv-icon__icon--info {
		color: #2C2C2C !important;
		// font-weight: bold !important;
	}

	::v-deep .uv-cell__value {
		font-weight: bold;
		color: #1D2228 !important;
	}
</style>